第十天：專案維護 - Webpack 編譯與打包優化(feat. Tree Shaking、Minify & Uglify、Code Splitting & Cache Brusting)

第 12 屆 iThome 鐵人賽

DAY 10

Modern Web

Quasar CLI Framework 邪教：整合分散的前端技術和工具、常見的開發需求系列第 10 篇

第十天：專案維護 - Webpack 編譯與打包優化(feat. Tree Shaking、Minify & Uglify、Code Splitting & Cache Brusting)

12th鐵人賽

通靈亡

2020-09-25 23:36:02

1818 瀏覽

分享至

※ 今天內容

一、Tree Shaking
二、Minify & Uglify
三、Code Splitting & Cache Brusting
四、總結
五、延伸閱讀

一、Tree Shaking

以字面上的意思，就是搖樹 (~~別傻了根本搖不動~~)
實際上的意思，就是去除沒必要的程式碼 (dead code elimination)：

例如下面程式碼例子：

// src/lib.js

export function methodA() {
    return 'methodA';
}

export function methodB() {
    return 'methodB';
}

export function methodC() {
    return 'methodC';
}

// src/index.js
import { methodA } from "./mathUtils";

methodA();

經過Tree Shaking，編譯出來的程式碼結果：

/* 0 */
/***/ function() {
    "use strict";
    // CONCATENATED MODULE: ./src/lib.js
        function methodA() {
        return 'methodA';
    }
    // CONCATENATED MODULE: ./src/index.js
    console.log(methodA());
    /***/}
/******/ ]);

二、Minify & Uglify

替除HTML、Javascript 和 Css 的程式碼多餘的空白與空白行

HTML 的部分 Quasar 是使用 html-minifier

<!DOCTYPE html><html><head><title>Quasar App</title><meta charset=utf-8><meta name=description content="A Quasar Framework app"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon type=image/png sizes=128x128 href=icons/favicon-128x128.png><link rel=icon type=image/png sizes=96x96 href=icons/favicon-96x96.png><link rel=icon type=image/png sizes=32x32 href=icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=icons/favicon-16x16.png><link rel=icon type=image/ico href=favicon.ico><link href=css/vendor.12e75b1c.css rel=stylesheet><link href=css/app.0e433876.css rel=stylesheet></head><body><div id=q-app></div><script src=js/vendor.fc885105.js></script><script src=js/app.74e5baec.js></script></body></html>

CSS 的部分Quasar是使用PostCSS + cssnano 處理：
壓縮過後的CSS：

@charset "UTF-8";.section{padding:25px 30px}.section_title{font-size:2.4em;font-weight:700;text-align:center;color:#212121}.section_content{margin-top:25px}

Javascript 的部分 Quasar 是使用 UglifyJS
壓縮過後的JS：

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
//# sourceMappingURL=about.7ada64aa.js.map

另外，Dev Server 上的網頁和程式碼並不是最佳化的結果 (像是 Uglify & Minify)，正式的網站還是要用npm run build產出的檔案佈署，不建議以 Dev Server 來架設實際的網站。